<template>
  <div class="">
    <van-dropdown-menu>
      <van-dropdown-item disabled title="综合" />
      <van-dropdown-item v-model="priceVal" title="价格" :options="priceArr" @change="priceChange" />
      <van-dropdown-item v-model="categoryVal" title="分类" :options="filterCategory" @change="categoryChange" />
    </van-dropdown-menu>
    <van-empty v-if="goodsList.length==0" image="search" description="您搜索的产品不存在" />
    <product v-else :goodsList="goodsList" />
  </div>
</template>

<script>
  import product from './product.vue'
  export default {
    props: ["filterCategory", "goodsList"],
    components: {
      product
    },
    data() {
      return {
        //判断是否有产品列表
        /* ifEmpty:false, */
        value1: 0,
        //分类下拉菜单的当前项
        categoryVal: 1005000,
        priceVal: 0,
        priceArr: [{
            text: "价格由高到低",
            value: "desc"
          },
          {
            text: "价格由低到高",
            value: "asc"
          }
        ],
      };
    },
    computed: {},
    watch: {},
    methods: {
      //分类下拉的点击事件
      categoryChange(value) {
        console.log(value);
        //子传父
        this.$emit('categoryChange', value); //子传父
      },
      //价格下拉菜单的点击事件
      priceChange(value) {
        //子传父
        this.$emit('priceChange', value);
      }

    },
    created() {},
    mounted() {

      let that = this;
      //遍历数组
      console.log(this.filterCategory);
      this.filterCategory.map((val, index) => {
        if (val.checked) {
          that.categoryVal = val.value;
        }
      })
    },
  };
</script>
<style lang='' scoped>
</style>
